IMG

For information about scripting the <IMG> element, see the Scripting the <IMG> element topic.

The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

The Image element, which is empty (no closing element), has these attributes:

ALIGN="left|right|top|texttop|middle|
absmiddle|baseline|bottom|absbottom"
ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.
ALIGN=top aligns itself with the top of the tallest item in the line.
ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
ALIGN=middle aligns the baseline of the current line with the middle of the image.
ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
ALIGN=bottom aligns the bottom of the image with the baseline of the current line.
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT="Alternative Text"
Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer and Netscape (4.0 and above) also use any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image. Example of use:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

ISMAP
The ISMAP attribute identifies an image as an image map. Image maps are graphics in which certain regions are mapped to other documents. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:

<A HREF="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.gif" ISMAP></A>

NOTE : To be able to employ this type of image maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behaviour. i.e. the document must have access to an image map handling script and the map file defining the graphic Æhot-spotsÆ

A simpler form of image map, known as client-side image maps are also possible. Currently, this type of map is a proposed extension to HTML. For details, see Client Side Image Maps.

SRC="URL of image"
The value of the SRC attribute is the URL of the image to be displayed. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is the only mandatory attribute of the <IMG> element. Image elements are allowed within anchors.

<IMG SRC="warning.gif">Be sure to read these instructions.

The SRC attribute can accept fully qualified, or partial, relative URL's, or even just image names (providing the image is located in the same directory as the HTML document).

WIDTH=value HEIGHT=value
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloading, which can significantly speed up display of the document text. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated. Internet Explorer and Netscape use image placement mechanisms, so that if the display of in-line images has been turned off, the space that the images would occupy in the page is marked as if the image were there (with any ALT text being displayed in the place holder). This allows authors to be sure that the text layout on the page will be as desired, even if the user is not displaying the images.

BORDER=value
This lets the document author control the thickness of the border around an image displayed.
It is useful if the image is to be a hyperlink, in that the BORDER can be set to "0" to avoid the display of the standard blue hypertext link border.

VSPACE=value HSPACE=value
For the floating images (i.e. those displayed with an ALIGN=left|right attribute) it is likely that the author does not the text wrapped around the image to be pressed up against the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. The Value should be a pixel value.

LOWSRC
Using the LOWSRC attribute, it is possible to use two images in the same space. The syntax is :

<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">

Browsers that do not recognise the LOWSRC attribute cleanly ignore it and simply load the image specified by the SRC attribute.
Browsers that support this attribute however, will load the image called "lowquality.gif" on their first layout pass through the document. When the rest of the document has been completely loaded and formatted on the page, the browser will then redraw the page and load the image specified by the standard SRC attribute. This allows the author to specify a low resolution (or smaller file size version of the main image - perhaps a grey scale version) image to be displayed initially while the document is loading, which is later replaced by the higher quality version.
Any graphic file format that the browser supports can be used interchangeably within the LOWSRC and SRC attributes. You can also specify width and/or height values in the <IMG> element, and both the high-res and low-res versions of the image will be appropriately scaled to match. However, if no width and height values have been set, the values used for the LOWSRC image (i.e. the dimensions of that image) will be used to re-scale the SRC image. This is to minimise page format disruption that would be caused by the browser trying to load two different sized images into the same page space.

NAME
This attribute sets the name of the image in the document. It can then be accessed by scripting methods (in Netscape 3.0 and above), by referencing the Image Object.

Example
The following HTML fragment produces the display shown below.

<IMG ALIGN="left" SRC="mosaic.gif" HSPACE="20" ALT="Mosaic logo"> Mosaic, from the National Centre for Supercomputing Applications represents the original graphical browser which Netscape development was based on. <HR> <IMG ALIGN="right" SRC="netscape.gif" HSPACE="20" ALT="Netscape logo"> Netscape, from Netscape Communications, after initial development from Mosaic, stormed away and became more or less the de facto Web browser. <HR> <IMG ALIGN="left" SRC="iexplore.gif" HSPACE="20" ALT="Internet Explorer logo">Internet Explorer, from Microsoft , exhibits Microsoft's serious intentions in the web browser market and compete head-to-head with Netscape, offering the same functionality...and then some more. <HR>

Mosaic, from the National Centre for Supercomputing Applications represents the original graphical browser which Netscape development was based on.

Netscape, from Netscape Communications, after initial development from Mosaic, stormed away and became more or less the de facto Web browser.

Internet Explorer, from Microsoft, exhibits Microsoft's serious intentions in the web browser market and competes head-to-head with Netscape, offering the same functionality...and then some more.

<IMG> can also take the CLASS, ID and STYLE attributes to allow style sheet definitions to be applied to it. For more details of these attributes, see the Style Sheets topic. The type of style sheet information that would generally be applied to the <IMG> element would be border styles, colours etc.